<template>
	<div id="form2">
		<el-form :model="assetForm" status-icon :rules="rules" ref="assetForm" label-width="100px" class="demo-assetForm">
		 <el-form-item label="名称" prop="name">
		    <el-input v-model="assetForm.name" id="assetFormName" auto-complete="off"></el-input>
		 </el-form-item> 
		  <el-form-item label="类别">
		    <el-select v-model="assetForm.typeValue" placeholder="请选择设备类别">
		    <el-option
		      v-for="item in assetForm.type"
		      :key="item.value"
		      :label="item.label"
		      :value="item.value">
		    </el-option>
		  </el-select>
		  </el-form-item>
		  <el-form-item label="IP地址">
		    <el-input v-model="assetForm.ip"></el-input>
		  </el-form-item>
		  <el-form-item label="mac地址">
		    <el-input v-model="assetForm.mac"></el-input>
		  </el-form-item>
		  <el-form-item label="开放端口">
		    <el-input v-model="assetForm.port"></el-input>
		  </el-form-item>
		  <el-form-item label="公司名称">
		    <el-input v-model="assetForm.compony"></el-input>
		  </el-form-item>
		  <el-form-item label="资产价值">
		    <el-select v-model="assetForm.priceValue" placeholder="请选择资产价值">
		      <el-option
		      v-for="item in assetForm.price"
		      :key="item.value"
		      :label="item.label"
		      :value="item.value">
		    </el-option>
		    </el-select>
		  </el-form-item>
		  <el-form-item label="设备序列号">
		    <el-input v-model="assetForm.assetSerialNumber"></el-input>
		  </el-form-item>
		  <el-form-item label="设备型号">
		    <el-input v-model="assetForm.assetModel"></el-input>
		  </el-form-item>
		  <el-form-item label="操作系统">
		    <el-input v-model="assetForm.system"></el-input>
		  </el-form-item>
		  <el-form-item label="固件版本">
		    <el-input v-model="assetForm.version"></el-input>
		  </el-form-item>
		  <el-form-item label="父节点">
		    <el-select v-model="assetForm.fatherValue" collapse-tags multiple placeholder="请选择父节点">
		      <el-option
			      v-for="item in assetForm.father"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
		    </el-select>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="submitForm('assetForm')">立即创建</el-button>
		    <el-button @click="resetForm('assetForm')">重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
	    data() {
	    	var validateName = (rule, value, callback) => {
		        if (value === '') {
		          callback(new Error('请输入用户名！'));
		        } else if (!/^[a-zA-Z0-9_]{1,149}$/.test(value)) {
		          callback(new Error('请输入用大小写字母或者数字或者下划线组成且不超过150字节的用户名！'));
		        } else {
		          callback();
		        }
		      }
	      return {
	        assetForm: {
	          name: '',
	          typeValue:'',
	          type: [{
		          value: '选项1',
		          label: '上位机'
		        }, {
		          value: '选项2',
		          label: '路由器'
		        }, {
		          value: '选项3',
		          label: '主控卡'
		        }, {
		          value: '选项4',
		          label: 'PLC'
		        }],
	          ip: '',
	          mac: '',
	          port: '',
	          compony:'',
	          priceValue:'',
	          price: [
	          	{
		          value: '选项1',
		          label: '低'
		        }, {
		          value: '选项2',
		          label: '中'
		        }, {
		          value: '选项3',
		          label: '高'
		        }
	          ],
	          assetSerialNumber: '',
	          assetModel:'',
	          system:'',
	          version:'',
	          father: [{
		          value: '1',
		          label: '192.168.0.1'
		        }, {
		          value: '2',
		          label: '192.168.0.2'
		        }, {
		          value: '3',
		          label: '192.168.0.3'
		        }, {
		          value: '4',
		          label: '192.168.0.4'
		        }, {
		          value: '5',
		          label: '192.168.0.5'
		        }],
	          fatherValue:[],
	          },
	        rules: {
	          name: [
	            { validator: validateName, trigger: 'blur' }
	          ]
	        }
	      };
	    },
	    methods: {
	      /*submitForm(formName) {
	        this.$refs[formName].validate((valid) => {
	          if (valid) {
	            alert('submit!');
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	      },
	      resetForm(formName) {
	        this.$refs[formName].resetFields();
	      }*/
	    }
	  }
</script>

<style>
	#form2{
		padding:50px 100px 0 150px;
	}
</style>